
<%@ page contentType="text/html;charset=UTF-8" %>
<%//@include file="../../common/sessionValidate.jsp" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML>
<html lang="UTF-8">
<head>
    <title>申请信息</title>
    <%@ include file="../../common/meta.jsp" %>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="X-UA-Compatible" content="IE=9">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <link rel="stylesheet" href="<%=basePath%>css/my-bootstrap.css" media="screen" id="tuserskin">
    <link rel="stylesheet" href="<%=basePath%>js/toastr/toastr.css">
    <link rel="stylesheet" href="<%=basePath%>css/bootstrapValidator.min.css">
    <link rel="stylesheet" href="<%=basePath%>css/font-awesome.min.css">
    <link rel="stylesheet" href="<%= basePath %>css/my-bootstrap.css" media="screen" id="tuserskin">
    <link rel="stylesheet" href="<%= basePath %>font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        hr {
            margin-top: 1px;
            border-bottom: 1px solid #1BBC9B;
        }

        .table-title
        {
            border-collapse: collapse;
            width: 100%;
            border: solid 1px #ddd;
            font-size: 12px;
            font-weight: bold;
            color: #555;
        }

        .table-title td
        {
            text-align: center;
            padding: 5px;
            height: 25px;
        }

        .table-days
        {
            border-collapse: collapse;
            width: 100%;
        }

        .table-days td
        {
            border: solid 1px #ddd;
            height: 140px;
            vertical-align: top;
            width: 14px;
        }

        .td-gray
        {
            color: #ccc;
            background-color: #f7f7f7;
        }

        .div-task-item
        {
            background-color: #bfecff;
            margin-top: 2px;
            padding: 2px;
            cursor: default;
            /* margin-left: 5px;
            margin-right: 5px;*/
        }

        .div-task-item:hover
        {
            background-color: #ff5588 !important;
        }

        .div-no-task-item
        {
            margin-top: 2px;
            padding: 2px;
        }

        .td-selected
        {
            background-color: #e0f2f8 !important;
        }

        .div-day-title
        {
            text-align: right;
            padding: 3px;
        }

        .td-today
        {
            background-color: #fcd7d7;
        }

        .td-today div:first-child
        {
            border-top: solid 2px #f72f37;
            padding-top: 1px;
        }

        .highlight-task
        {
            background-color: #ff3366 !important;
            color: #fff !important;
        }
    </style>
</head>

<body>


<div class="" style="margin-right:2px;padding-right:1px;">

    <!--------------------------查询条件表格  start------------------------------->
    <form id="form1" runat="server">
        <!-- 查询面板 -->
        <div class="panel panel-primary" id="cxDiv">
            <!-- Default panel contents -->
            <div class="panel-heading  ">
                <i class="icon-filter"></i>&nbsp;全部日程
                <span class="text-right pull-right">
					<a href="<%=basePath%>t_news/toT_newsCurdRicheng?oplx=add" class="text-danger">
                        <button type="button" class=" btn btn-success btn-xs img-rounded"><i class="icon-search"></i>&nbsp;新建日程</button>
                    </a>&nbsp;
				</span>
            </div>
            <div class="panel-body">
                <div class="row" style="padding:0 20px;">
                    <div class="col-xs-2">
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-primary" onclick="preMonth()"><i class="fa fa-chevron-left" aria-hidden="true"></i></button>
                                </div>
                                <div style="border:1px #e8e8e8 solid;height:34px;line-height:34px;text-align:center;">
                                    <input type="text"  value="" id="year" style="display:inline-block;border:0;width:40px;line-height:34px;background:none;"><span>年</span>
                                    <input type="text"  value="" id="month" style="display:inline-block;border:0;width:20px;line-height:34px;background:none;"><span>月</span>
                                </div>
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-primary" onclick="nextMonth()"><i class="fa fa-chevron-right" aria-hidden="true"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-1"><button type="button" class="btn btn-primary" onclick="gotoToday()">今天</button></div>
                </div>

                <div class="row" style="padding:0 20px;">
                    <table class="table table-bordered" cellpadding="0" cellspacing="0">
                        <thead>
                        <tr class="">
                            <th>周一</th>
                            <th>周二</th>
                            <th>周三</th>
                            <th>周四</th>
                            <th>周五</th>
                            <th>周六</th>
                            <th>周日</th>
                        </tr>
                        </thead>
                    </table>

                    <div id="div-days" style="height: 300px; overflow: auto; margin-top:-20px;">
                        <table id="table-days" class="table-days table table-bordered" cellpadding="0" cellspacing="0">
                        </table>
                    </div>
                </div>

            </div>
        </div>
    </form>

</div>
<script src="<%=basePath%>js/bootstrap.min.js"></script>
<!--<script src="<%=basePath%>js/jquery-1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrapValidator.js"></script>-->
<script src="<%=basePath%>js/bootstrap-paginator.min.js"></script>
<script src="<%=basePath%>/js/respond.js"></script>
<script src="<%=basePath%>/js/html5.js"></script>
<script src="<%=basePath%>js/toastr/toastr.js"></script>
<script src="<%=basePath%>js/bootbox.js"></script>
<script src="<%=basePath%>js/jquery.validate.js"></script>
<!-- <script src="<%=basePath%>js/additional-methods.min.js"></script> -->
<script src="<%=basePath%>js/my-jquery-curd.js"></script>
<script src="<%= basePath %>js/tableSortTool.js" ></script>
<script src="<%= basePath %>js/calendar.js" ></script>
<script type="text/javascript">
    var data;
    var taskCodeList = new Array();

    $().ready(function(){
        //1、初始化数据显示
        Search(0);
    }) //end funciton read;

    //根据查询条件，查询列表数据并显示
    function Search(startIndex){
        var url = "<%=basePath%>t_news/getAllT_news?startIndex=0&pageSize=1000&biztype=RiCheng&time="+Math.random();
        //alert(url);
        $.ajaxSettings.async = false;
        $.getJSON(url, function (datasub){
            //alert(JSON.stringify(datasub));
            var list = new Array();
            $.each(datasub.items, function(i,item){
                //alert(JSON.parse(item));
                var nyr = item.ext1.split("-");
                var month = nyr[1]; //月的格式 01、12；去掉0；否则不能显示；
                var day = nyr[2]; //日的格式 01、20；去掉0；否则不能显示；
                if(month<10){ //小于10，去掉0；
                    month = month.substring(1);
                }
                if(day<10){ //小于10，去掉0；
                    day = day.substring(1);
                }
                // { id: 'item.id', taskCode: '001', title: '+doNull(item.title)+', content: '测试内容', year: 2021, month: 6, day: 3 },
                list[i]= { id: i, taskCode: '001', title: '<a href="<%=basePath%>t_news/toT_newsCurdRicheng?id='+item.id+'&oplx=view">'+doNull(item.title)+'</a>', content: doNull(item.memo), year: nyr[0], month:  month, day:  nyr[2] };
            });//end each data;

            data= { list: list };
            //alert(data);
            //alert(JSON.stringify(data));

            /**
            data = {
                list: [
                    //说明：id暂时无用
                    { id: 'item.id', taskCode: '001', title: '+doNull(item.title)+', content: '测试内容', year: 2021, month: 6, day: 3 },
                    { id: 'item.id', taskCode: '001', title: '+doNull(item.title)+', content: '测试内容', year: 2021, month: 6, day: 3 }
                ]
            };
            //*/

            function createTaskCodeList(data, taskCodeList) {
                //$.each(data.items, function(i,item){
                for (var i = 0; i < data.list.length ; i++) {
                    var bl = true;
                    for (var j = 0; j < taskCodeList.length; j++) {
                        if (taskCodeList[j] == data.list[i].taskCode) {
                            //if (taskCodeList[j] == item.id) {
                            bl = false;
                        }
                    }
                    if (bl) {
                        taskCodeList.push(data.list[i].taskCode);
                    }
                }
            }
            createTaskCodeList(data, taskCodeList);

            $(function () {
                $(".table-days").parent().height($(window).height() - $(".table-days").parent().position().top - 10);

                $("#year").change(function () {
                    var year = $("#year").val();
                    var month = $("#month").val();
                    createPlanTable(year, month);
                });
                $("#month").change(function () {
                    var year = $("#year").val();
                    var month = $("#month").val();
                    createPlanTable(year, month);
                });
                gotoToday();

                //ie6、7
                if ($.browser.msie) {
                    if (parseInt($.browser.version) == 7 || parseInt($.browser.version) == 6) {
                        $("#table-days").width($("#table-days").width() - 20);
                        $("#table-days").parent().height($("#table-days").parent().height() - 15);
                    }
                }
            }); //end $

            //创建计划表格
            function createPlanTable(year, month) {
                var html = '';
                var table = $("#table-days");
                var days = getDaysOfMonth(year, month);
                var preDays = getDaysOfPreMonth(year, month);
                var week = getWeek(year, month, 1);
                var day = preDays - week + 1;
                var grayDay = 'td-gray'; //置灰
                var current = false;
                var today = new Date();

                for (var i = 0; i < (days + week - 1) / 7 ; i++) {
                    html += '<tr>';
                    for (var j = 0; j < 7; j++) {
                        day++;
                        if (current == false && day > preDays) {
                            day = 1;
                            grayDay = '';
                            current = true;
                        }
                        if (current == true && day > days) {
                            day = 1;
                            grayDay = 'td-gray';
                            current = false;
                        }

                        var todayClass = '';
                        if (current && today.getFullYear() == year && today.getMonth() == month - 1 && today.getDate() == day) {
                            todayClass = 'td-today';
                        }
                        html += '<td day="' + day + '" class=" ' + grayDay + ' ' + todayClass + '"><div class="div-day-title">' + day + '日</div>';

                        var virtualTaskCount = 0;
                        for (var k = 0; k < data.list.length; k++) {
                            var model = data.list[k];
                            if (grayDay == '' && year == model.year && month == model.month && day == model.day) {
                                var taskIndex = getTaskIndex(taskCodeList, model.taskCode);
                                for (var m = virtualTaskCount; m < taskIndex; m++) {
                                    html += '<div class="div-no-task-item"></div>';
                                    virtualTaskCount++;
                                }
                                html += '<div class="div-task-item" taskCode="' + model.taskCode + '" style="background-color:#' + getColor(taskCodeList, model.taskCode) + ';">' + model.title + '</div>';
                                virtualTaskCount++;
                            }
                        }

                        html += '</td>';
                    }
                    html += '</tr>';
                }
                table.html(html);

                //优化显示
                if (true) {
                    for (var i = 0; i < taskCodeList.length; i++) {
                        table.find("tr").each(function () {
                            var tr = $(this);

                            var taskItem = tr.find("div[taskCode='" + taskCodeList[i] + "']");
                            if (taskItem.length > 0) {
                                var k = -1;
                                while (k != -2) {
                                    k++;
                                    var bl = true;
                                    taskItem.each(function () {
                                        var prev = $(this).parent().find("div:eq(" + (k + 1) + ")");
                                        if (!prev || prev.length == 0) k = -2;
                                        if (prev && prev.attr("taskCode") == taskCodeList[i]) k = -2;
                                        if (!$(this).parent().attr("class") || !prev || prev.length == 0 || prev.attr("class").indexOf("div-no-task-item") == -1) {
                                            bl = false;
                                        }
                                    });
                                    if (bl) {
                                        taskItem.each(function () {
                                            var item = $(this);
                                            var prev = item.parent().find("div:eq(" + (k + 1) + ")");
                                            if (prev.length > 0) {
                                                item.after('<div class="div-no-task-item"></div>');
                                                item.wrap("<div></div>");
                                                prev.after(item.parent().html());
                                                prev.remove();
                                                item.parent().remove();
                                            }
                                        });
                                    }

                                }
                            }
                        });
                    } //end for taskCodeList
                    //去空
                    table.find("td").each(function () {
                        var td = $(this);
                        while (true) {
                            var div = td.find("div:last");
                            if (div.attr("class").indexOf("div-no-task-item") != -1) {
                                div.remove();
                            }
                            else {
                                break;
                            }
                        }
                    });
                } //end 优化显示

                //日期td单击双击
                table.find("td").each(function () {
                    var td = $(this);
                    var grayDay = td.attr('class').indexOf('td-gray') == -1;
                    td.click(function () {
                        if (grayDay) {
                            if (td.attr("class").indexOf("td-selected") != -1) {
                                td.removeClass("td-selected");
                            } else {
                                $(".td-selected").removeClass("td-selected");
                                td.addClass("td-selected");
                            }
                        }
                    });
                    td.dblclick(function () {
                        if (grayDay) {
                            add(td.attr("day"));
                        }
                    });
                });

                //任务单击双击
                $(".div-task-item").each(function () {
                    var taskItemDiv = $(this);
                    var taskCode = taskItemDiv.attr("taskCode");
                    taskItemDiv.click(function (evt) {
                        $(".div-task-item").removeClass("highlight-task");
                        table.find("div[taskCode='" + taskCode + "']").addClass("highlight-task");
                        evt.stopPropagation();
                    });
                    taskItemDiv.dblclick(function (evt) {
                        evt.stopPropagation();
                    });
                });
            }

            //创建新计划
            function add(day) {
                data.list.push({ id: '15', taskCode: '000', title: '测试新增', content: '测试内容', year: 2016, month: 1, day: parseInt(day) });
                createTaskCodeList(data, taskCodeList)
                var scrollTop = $("#div-days").scrollTop();
                $("#month").change();
                $("#div-days").scrollTop(scrollTop);
            }



            //获取task索引
            function getTaskIndex(taskCodeList, taskCode) {
                var pos = 0;
                for (var i = 0; i < taskCodeList.length; i++) {
                    if (taskCodeList[i] == taskCode) {
                        break;
                    }
                    pos++;
                }
                return pos;
            }




        })//end getJSON;
    }

    //今天
    function gotoToday() {
        var today = new Date();
        $("#year").val(today.getFullYear());
        $("#month").val(today.getMonth() + 1);
        $("#month").change();
        var top = $(".td-today").position().top - $(".table-days").position().top;
        var div = $("#div-days").scrollTop(top);
        var div = $(".td-selected").removeClass("td-selected");
    }

    //上月
    function preMonth() {
        var year = $("#year").val();
        var month = $("#month").val();
        if (month == 1) {
            $("#year").val(parseInt(year) - 1);
            $("#month").val(12);
        } else {
            $("#month").val(parseInt(month) - 1);
        }
        $("#month").change();
        $("#div-days").scrollTop($(window).height());
    }

    //下月
    function nextMonth() {
        var year = $("#year").val();
        var month = $("#month").val();
        if (month == 12) {
            $("#year").val(parseInt(year) + 1);
            $("#month").val(1);
        } else {
            $("#month").val(parseInt(month) + 1);
        }
        $("#month").change();
        $("#div-days").scrollTop(0);
    }
</script>
</body>
</html>

<script type="text/javascript">
    //获取当月天数
    function getDaysOfMonth(year, month) {
        var d = new Date(year, month, 0);
        return d.getDate();
    }

    //获取前一个月天数
    function getDaysOfPreMonth(year, month) {
        if (month == 1) {
            month = 12;
            year = year - 1;
        }
        else {
            month = month - 1;
        }
        var d = new Date(year, month, 0);
        return d.getDate();
    }

    //获取当天星期数(0到6)
    function getWeek(year, month, day) {
        var d = new Date(year, month - 1, day);
        return d.getDay();
    }

    //颜色集合
    var myColor = [
        'ccddff',
        'ccffdd',
        'eeccff',
        'eeffcc',
        'ffccee',
        'ffeecc'
    ];

    //获取颜色
    function getColor(taskCodeList, taskCode) {
        var pos = 0;
        for (var i = 0; i < taskCodeList.length; i++) {
            if (taskCodeList[i] == taskCode) {
                break;
            }
            pos++;
            if (pos > myColor.length - 1) {
                pos = 0;
            }
        }
        return myColor[pos];
    }
</script>